<template>
  <div>
    <SearchHeader v-model="queryParam.where.keyword" :canAdd="canModify" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
        <Col span="3"><Input :placeholder="$t('code')" v-model="queryParam.where.code"></Input> </Col>
        <Col span="3"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>
        <Col span="3"><Input :placeholder="$t('account')" v-model="queryParam.where.loginName"></Input> </Col>
        <Col span="3"><OrganizationTree ref="srhOrg" v-model="queryParam.where.orgId" width="200px"/></Col>
      </Row>
    </SearchHeader>

    <Card>
      <Table :loading="loading" stripe  :data="tableData" :columns="columns">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default"  :disabled="!canModify" :Title="$t('edit')" icon="md-create" v-if="row.loginName !='admin'" style="margin-right: 5px" @click="edit(row)"></Button>
          <Button type="default"  :disabled="!canModify" :title="$t('delete')" icon="md-trash" v-if="row.loginName !='admin'" style="margin-right: 5px" @click="remove(row)"></Button>
          <Button type="default"  :disabled="!canModify" :title="$t('password_reset')" icon="md-share-alt" v-if="row.loginName !='admin'" style="margin-right: 5px" @click="resetPassword(row)"></Button>
          <Button type="default"  :disabled="!canModify" :title="$t('organization_role')" icon="md-contacts" v-if="row.loginName !='admin'" @click="showUserOrg(row)"></Button>
        </template>
        <template slot-scope="{ row, index }" slot="enabled">
            <i-switch ref="statusSwitch" true-color="#13ce66" false-color="#ff4949" :value="row.enabled" size="large"
                      @on-change="statusChange(row)" :before-change="beforeChange">
              <span slot="open">{{$t('endabled')}}</span>
              <span slot="close">{{$t('disabled')}}</span>
            </i-switch>
        </template>
        <template slot-scope="{ row, index }" slot="enabledNotify">
          <i-switch ref="statusSwitch" true-color="#13ce66" false-color="#ff4949" :value="row.enabledNotify" size="large">
            <span slot="open">{{$t('endabled')}}</span>
            <span slot="close">{{$t('disabled')}}</span>
          </i-switch>
        </template>

      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="getData"></TopnavPage>
    </Card>
    <UserEdit ref="userEdit"></UserEdit>
    <UserOrgEdit ref="userOrgEdit"></UserOrgEdit>
  </div>
 </template>
<script>
import {queryPage, checkAuthMaintain, removeUser } from '@/api/user';
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import OrganizationTree from '@/components/topnav/OrganizationTree';
import UserEdit from '@/view/User/UserEdit';
import UserOrgEdit from '@/view/User/UserOrgEdit';
import {apiResult, clone} from '@/libs/util'
import {resetPaasword} from '@/api/user'
import AuthCheck from '@/api/AuthCheck'
export default {
  name: 'User',
  components: {OrganizationTree,TopnavPage,SearchHeader,UserEdit,UserOrgEdit},
  computed:{
    columns() {
      return[{title: this.$t('operate'), key: 'action', width: 240, slot: 'action'},
        {title: this.$t('code'), key: 'code', sortable: true, width: 175},
        {title:  this.$t('name'), key: 'name', sortable: true, width: 200},
        {title:  this.$t('account'), key: 'loginName', sortable: true, width: 200},
        {title: this.$t('organization'), key: 'orgShortName', sortable: true, width: 200},
        {title: this.$t('user_role_reg'), key: 'userRoles', sortable: true, width: 200},
        {title: this.$t('organization_role'), key: 'userOrgs', sortable: true, width: 200},
        {title: this.$t('status'), key: 'enabled', sortable: true, width: 100, slot: 'enabled'},
        {title: this.$t('alarm_push'), key: 'enabledNotify', sortable: true, width: 150, slot: 'enabledNotify'}]
    }
  },
  data() {
    return {
      //transferTitles: ['所有角色','已选角色'],
      //titles: ['所有角色', '已选角色'],
      /** 可选的所有角色 数据格式｛Key:xxx,label:xxx｝*/
      //rolesData: [],
      //roleList:[{value: 0, label: null}],
      /** 选择的角色  只有key 如[1]*/
      //targetKeys: [],
      canModify: false,
      loading: false,
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 0,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {keyword:null,code: null, name: null, loginName: null, orgId: null},
        init:()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
          this.queryParam.where.loginName=null;
          this.queryParam.where.orgId=null;
        },
      },
      tableData:[],
      //pageizeOpts:[10,15,20,30,40,100],

    }
  },
  methods: {
    add() {
      let row = {
        id: null,
        code: null,
        name: null,
        loginName: null,
        orgId: null,
        enabled: true,
        enabledNotify:true,
        type: 1
      }
      this.$refs.userEdit.openDialog("ADD", row, this.getData);
    },
    resetPassword(row){
      //const msg = '<p>确定要重置'+row.name+'的密码？</p'
      this.$Modal.confirm({
        title: this.$t('reset_password_confirm'),
        content: this.$t('reset_password_msg_confirm_message'),
        onOk: () => {
          //重置密码
          resetPaasword(JSON.stringify(row)).then(res => {
              apiResult(res.data,true);
            });
        },
        onCancel: () => {
        }
      });
    },
    edit(row) {
      this.$refs.userEdit.openDialog("EDIT", clone(row), this.getData);
    },
    view(row) {
      this.$refs.userEdit.openDialog("VIEW", clone(row), this.getData);
    },
    /**
     * 多机构角色
     */
    showUserOrg(row) {
      this.$refs.userOrgEdit.openDialog(clone(row), this.getData);
    },
    getData() {
      /** 生成查询条件 */
      queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = [];
        apiResult(res.data,false,result=>{
          this.queryParam.page.total = result.data.total;
          this.tableData = result.data.records;
        });
      })
    },
    remove(row) {
      this.$Modal.confirm({
        title: this.$t('delete_confirm'),
        content: this.$t('delete_make_sure'),
        onOk: () => {
          removeUser(JSON.stringify(row)).then(res => {
            apiResult(res.data,true,result=>{
              this.getData();
            });
          });
        },
        onCancel: () => {
        }
      });
    },
    /**
     * 状态改变
     * */
    statusChange(row){ },
    /**
     * 阻止状态改变
     */
    beforeChange(){
      let canChange = new Promise(function (resolve, reject) {
        ;
      });
      return canChange;
    },
  },
  mounted() {
    this.canModify = new AuthCheck().userRegEdit();
    //console.log(">>>>>>> user.mounted: canModify=%o",this.canModify)
    this.getData();
  }
}
</script>
<style lang="less">
@import ".././template";
@import "../style/view-table";
.action-style{
  width: 50px;
  height: 30px;
  borderRadius: 5px
}
</style>
